<!-- 订单 -->
<template>
  <section class="order">
    <div class="order_title clearfix">
      <div class="pull_left">订单&nbsp;&gt;&nbsp;{{orderType}}</div>
      <div class="pull_right">账户：{{user.user_number?user.user_number:'--'}}</div>
    </div>
    <div class="detail clearfix">
      <div class="pull_left" >
        <div :style="ProfitClass">{{maxCcDataList.pcProfitAndLoss?maxCcDataList.pcProfitAndLoss:'--'}}</div>
        <div>
          <span>浮动盈亏&nbsp;&nbsp;($)</span>
          <img
            src="../../assets/image/icon_bangzhu.png"
            alt
            width="14"
            @mousemove="tipsShow=true"
            @mouseout="tipsShow=false"
          >
        </div>
      </div>
      <div class="pull_left">
        <div>
          <span>可用：</span>
          <!-- {{ dataShow.usable}} -->
          <em>{{dataShow.usable }}</em>
        </div>
        <div>
          <span>净值：</span>
          <em>{{dataShow.netValue}}</em>
        </div>
      </div>
      <div class="pull_left">
        <div>
          <span>占用保证金：</span>
          <em>{{dataShow.bond}}</em>
        </div>
        <div>
          <span>总资产：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <em>{{dataShow.sumUpAsset}}</em>
        </div>
      </div>
      <div class="pull_left">
        <div>
          <span>按金水平：&nbsp;&nbsp;&nbsp;</span>
          <em>{{dataShow.marginLevel }}</em>
        </div>
        <div>
          <span>强制平仓点：</span>
          <em>{{ dataShow.forcedClosings}}</em>
        </div>
      </div>
      <div class="tips" v-show="tipsShow">
        <div class="title">资产账户说明</div>
        <p>1.浮动盈亏：交易品种行情变动造成的当前持仓的盈亏.</p>
        <p>2.占用保证金：买入卖出所有订单占用的保证金总和.</p>
        <p>3.余额：账户总额（不包括当前持仓商品订单盈亏）</p>
        <p>4.可用：即可用预付款，下单后账户余额扣除保证金以及持仓盈亏.</p>
        <p>5.净值：余额扣除持仓盈亏.</p>
        <p>6.按金水平：净值/占用保证金.</p>
        <p>7.强平仓点：净值/占用保证金＜20%</p>
      </div>
    </div>
    <div class="select">
      <label class="type">产品类型</label>
      <i-select
        v-model="modelType"
        style="width:110px"
        @on-change="getType"
        v-if="typeList&&typeList.length"
      >
        <i-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
      </i-select>
      <label class="dir">方向</label>
      <i-select v-model="modelDire" style="width:110px" @on-change="getDir">
        <i-option v-for="item in dirList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
      </i-select>
      <label class="time">时间</label>
      <Date-picker
        type="datetimerange"
        v-model="dateArea"
        placeholder="选择日期和时间范围"
        style="width: 320px"
        :editable="false"
        @on-change="getDateArea"
      ></Date-picker>
      <button class="btn_private" @click="resetDataMethod">搜索</button>
    </div>
    <router-view :user="user" :resetBol.sync="resetData" :searchData="searchData"/>
  </section>
</template>

<script>

import { type } from "os";
export default {
  data() {
    return {
      tipsShow: false,
      resetData: false, //重新请求数据
      dirList: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "买入"
        },
        {
          value: 2,
          label: "卖出"
        }
      ],
      modelType: "", //搜索类型
      modelDire: "", //搜索方向
      dateArea: null, //日期范围
      ccDataList: "",
      ccDataListAll: "",
      nodataListBol: false,
      searchData: {
        time_start: "", //开始时间
        time_end: "", //结束时间
        goods_type: "", //商品类型ID
        hold_type: "" //方向（1=买，2=卖）
      } //搜索数据
    };
  },

  computed: {
    //浮动盈亏涨跌样式
    ProfitClass(){
         let data=this.maxCcDataList.pcProfitAndLoss
         if(data.substr(0,1)== '+'){
             return  Number(data.substr(1,data.length-1)) > 0 ? 'color:#F74F3F':'color:#12C78C'
         }else{
             return  Number(data) > 0 ? 'color:#F74F3F':'color:#12C78C'
         }
    },
    //获取title
    orderType() {
      var str = "";
      switch (this.$route.name) {
        case "position":
          str = "当前持仓";
          break;
        case "pending":
          str = "挂单记录";
          break;
        case "history":
          str = "历史记录";
          break;
      }
      return str;
    },
    //产品类型
    typeList() {
      var typeList = this.$store.state.symbolTypeList;
      var list = [];
      if (typeList && typeList.length) {
        list.push({
          value: 0,
          label: "全部"
        });
        for (var i = 0; i < typeList.length; i++) {
          var item = typeList[i];
          list.push({
            value: item.id,
            label: item.type_name
          });
        }
      }

      return list;
    },
    //持仓最终数据
    maxCcDataList() {
      return this.$js.maxCcDataList();
    },
    user() {
      //是否登录
      var user = this.$store.state.user;
      return user;
    },
    //数据展示集合
    dataShow() {
      return this.$js.userAssetNews();
    }
  },

  watch: {
    $route() {
      this.modelType = ""; //搜索类型
      this.modelDire = ""; //搜索方向
      this.dateArea = null; //日期范围
      var area = this.dateArea ? this.dateArea : [];
      this.searchData = {
        time_start: area[0] || "", //开始时间
        time_end: area[1] || "", //结束时间
        goods_type: this.modelType || "", //商品类型ID
        hold_type: this.modelDire || "" //方向（1=买，2=卖）
      };
      if (this.$route.name == "history") {
        this.resetData = !this.resetData;
      }
    }
  },
  methods: {
      //获取用户信息
  
    getType(value) {
      this.modelType = value;
    },
    getDir(value) {
      this.modelDire = value;
    },
    getDateArea(value) {
      this.dateArea = value;
    },
    resetDataMethod() {
      var area = this.dateArea ? this.dateArea : [];
      this.searchData = {
        time_start: area[0] || "", //开始时间
        time_end: area[1] || "", //结束时间
        goods_type: this.modelType || "", //商品类型ID
        hold_type: this.modelDire || "" //方向（1=买，2=卖）
      };
      if (this.$route.name == "history") {
        this.resetData = !this.resetData;
      }
    },
   
  },
  created() {
    //进入页面获取最新user信息
    this.$store.dispatch("getUser");
    this.$store.getters.countCcDataList;
  },
  mounted() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>